<template>
  <div class="mobileLottery">
    <lotteryHeader></lotteryHeader>
    <div class="mobileMain scrollBar">
      <div class="mobileMainBox phoneLotteryColorW clearFiex">
        <div class="mobileMainLeft floatLeft">
          <img :src="mobileLeftImg" alt="">
        </div>
        <div class="mobileMainRight floatLeft">
          <div class="title">
            <img :src="mobileRightImg" alt="">
          </div>
          <div class="content clearFiex">
            <div class="mobileDownLoad floatLeft">
              <div class="mobileDownLoadBox relative">
                <div class="downLoadItem" :class="{on:isShow=='0'}" @mouseover="downLoadMouseOver(0)">
                  <i class="iosIcon"></i>iOS客户端下载
                </div>
                <div class="downLoadItem" :class="{on:isShow=='1'}" @mouseover="downLoadMouseOver(1)">
                  <i class="androidIcon"></i>Android版下载
                </div>
                <div class="downLoadQrcode">
                  <img :src="downloadImg" alt="">
                  <p>手机扫码下载</p>
                </div>
              </div>
              <div class="promptInfo">
                <p>不想下载？就用手机浏览器直接访问：</p>
                <!--<router-link to='http://www.baidu.com' tag="p">http://www.HTA08.cn</router-link>-->
                <a :href="visitLink">{{visitLink}}</a>
                <p>建议使用以下浏览器：<span>Google Chrom/Safari/UC</span></p>
              </div>
            </div>
            <div class="installStepsBox floatLeft relative">
              <div class="installSteps ">
                <p class="stepsTitle"><i class="helpIcon"></i>APP下载安装方法</p>
                <div class="methodItem">
                  <p>方法一：扫码下载安装</p>
                  <p><span>1、</span>手机扫描二维码，进入APP下载页面，点击下载</p>
                  <p><span>2、</span>APP安装（iPhone需授权，点击查看抽券教程）</p>
                </div>
                <div class="methodItem">
                  <p>方法二：通过电脑安装</p>
                  <p><span>1、</span>下载安装包：</p>
                  <p><span>2、</span>手机连接电脑，打开同步软件安装<br>( 下载91助手，PP助手 ) 点击查看安装教程</p>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <homeFooter></homeFooter>
  </div>
</template>

<script>
  import './main.scss';
  import homeFooter from '../../../components/footer/index';
  import lotteryHeader from '../../../components/lotteryColor/header/index';

  export default {
    data() {
      return {
        headerLogo: require('../../../assets/images/theColor/img/loginLogo.png'),
        mobileLeftImg: require('../../../assets/images/home/mobileLottery/phone.png'),
        mobileRightImg: require('../../../assets/images/home/mobileLottery/group.png'),
        downloadImg: '',
        isShow: '0',
        visitLink: 'http://www.HTA08.cn',//访问链接
      }
    },
    mounted(){
      let height = $(window).height();
      $('.mobileLottery').innerHeight(height);
    },
    activated() {
      this.init();
    },
    methods: {
      init() {
        let that = this;
        that._Util.post(that, that._Api.GET_PLATE_INFO, {}, (data) => {
          let plateData = data || [];
          plateData.forEach((v) => {
            if (v.name == 'station_website') {
              that.visitLink = v.value || '';
            }
            if (v.name == 'phone_purchase') {
              that.downloadImg = v.value || '';
            }
          });
        });
      },
      downLoadMouseOver(index){
        this.isShow = index;
      },
    },
    components: {
      homeFooter,
      lotteryHeader
    }
  }
</script>
